<template>
  <div class="x-aside">
    <el-menu :default-active="router.currentRoute.value.name" class="el-menu-vertical-demo" router :collapse="toggle">
      <el-menu-item index="index" route="index">
        <el-icon>
          <House />
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu v-show="isAdmin()" index="user">
        <template #title>
          <el-icon>
            <User />
          </el-icon>
          <span>用户</span>
        </template>
        <el-menu-item index="admin-user-manager" route="admin-user-manager">管理员用户管理</el-menu-item>
        <el-menu-item index="common-user-manager" route="common-user-manager">普通用户管理</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="plant-manager" route="plant-manager">
        <el-icon>
          <Cherry />
        </el-icon>
        <span>植物管理</span>
      </el-menu-item>
      <el-menu-item index="zombie-manager" route="zombie-manager">
        <el-icon>
          <Chicken />
        </el-icon>
        <span>僵尸管理</span>
      </el-menu-item>
      <el-menu-item index="about" route="about">
        <el-icon>
          <Guide />
        </el-icon>
        <span>关于</span>
      </el-menu-item>
      
    </el-menu>
  </div>
</template>

<script setup>
import { isAdmin } from '../api/user';

const router = useRouter()

defineProps({
  toggle: Boolean,
})

</script>

<style lang="scss" scoped>
.x-aside {
  user-select: none;
  height: 100%;
}

.el-menu-vertical-demo {
  height: 100%;
  position: relative;
}

.toggle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // transition: all 0.5s;
}
</style>